<template>

  <a-card
      class="general-card"
      title="网站设置"
      :header-style="{ border: 'none' }"
  >
    <a-spin class="form-full">
      <BhForm ref="formRef" :columns="formColumns" :model-value="formModel"
              :options="options"></BhForm>
    </a-spin>
    <!-- 按钮 -->
    <a-space class="button-container">
      <!-- 保存 -->
      <a-button type="primary"
                size="small"
                :loading="loading"
                @click="save">
        保存
      </a-button>
    </a-space>
  </a-card>

</template>

<script setup lang="ts">
import {BhForm, type Columns, type Options} from '@/components/BhForm'
import useLoading from "@/hooks/loading";
import {type DynamicsConfigQueryResponse, getConfigData, editConfigData} from '@/api/system/config';
import {updateRows} from "@/api/user-center";
import {Message} from "@arco-design/web-vue";

const code = ref('website')

const options: Options = {
  form: {size: 'large'},
  btns: {hide: true},
}
const formModel = ref<DynamicsConfigQueryResponse>({});
const formColumns = ref<Columns>([])
const {loading, setLoading} = useLoading();
const formRef = ref<InstanceType<typeof BhForm>>()
onBeforeMount(async () => {
  const render = (arr: any[]): Columns[] => {
    return arr.map((s) => {
      formModel.value[s.code] = s.value
      return {
        label: s.title,
        field: s.code,
        type: s.type,
        options:s.options_arr
      } as unknown as Columns;


    }).filter(Boolean);
  };
// 加载数据
  try {
    setLoading(true);
    const {data} = await getConfigData({code: code.value})
    formColumns.value = render(data)
    setLoading(false);
  } catch (e) {
    setLoading(false);
  } finally {
    setLoading(false);
  }

})
const save = async () => {
  formModel.value.code = code.value
  const error = await formRef.value?.formRef?.validate()
  if (error) return false;
  setLoading(true);
  await editConfigData(formModel.value)
  setLoading(false);
  Message.success('操作成功');

};
</script>

<style scoped lang="less">
@form-width: 628px;
.general-card {
  width: @form-width;
}

.button-container {
  margin-left: 65px;
  margin-bottom: 12px;
}

:deep(.arco-card-header-title) {
  font-weight: bold;
}
</style>